<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html" 
      xmlns:f="http://java.sun.com/jsf/core" 
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <head>
        <title>J Blogger</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
        <link rel="stylesheet" type="text/css" href="css/main.css"/>
        <script src="js/modernizr.js"/>
        <script src="js/jquery.js"></script>
        <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
        <script type="text/javascript">      
            $(document).on("ready", inicio);   
      
            function inicio()
            {
        
                $("#postArea textArea").on("keyup",habilitar);
                $("#fakebutton").on("click",mensageLongitud);
                $("#tagslist input").on("keyup",obtenerTags);
                $("#post_coment_area a").on("click",mostrarComentArea);
                initUserSocket();
        
            }
      
     
            function mostrarComentArea(event){
                userws.send("getConecteds");
                //console.log(event);
                var parent = event.currentTarget.parentElement;
                var su_parent = parent.parentElement;
                var finalChild = su_parent.childNodes[5];
                //console.log(finalChild.style.display);
                if(finalChild.style.display == "none"){
                    $(finalChild).fadeIn(100);
                    //console.log("fade in");
                }else{
                    $(finalChild).fadeOut(100);
                    //console.log("fade out");
                }
        
            }
            function obtenerTags(){
                var q = $("#tagslist input").val();
                $.get("/JMicroBlogger/resources/api",{q:q},tagsEncontradas);
            }
            function tagsEncontradas(result)
            {
                console.log(result);
                $( "#tagslist input" ).autocomplete({
                    source: result
                });
              
            }
            function mensageLongitud()
            {
                $("#entryMessage").css("height", "2em");
                $("#entryMessage").html('Message or question too short...');
            }
            function habilitar()
            {
                var text = $("#postArea textArea").attr("value");
                if(text.length>20){
                    $("#fakebutton").css("display","none");
                    $("#postEntry").css("display","inline-block");
                    $("#entryMessage").css("height", "0em");
                    $("#entryMessage").html("");
                }else{
                    $("#fakebutton").css("display","inline-block");
                    $("#postEntry").css("display","none");
          
                }
        
            }
            
        </script>
    </head>
    <body>
        <header>
            <h1 style="width: 50%">j-Blogger </h1>
            <section id="searcher">
                <h:form>
                    <div id="tagslist">
                        <h:inputText id="tags"  class="input" autocomplete="0ff" value="#{searchBeanController.postQ}" /> 
                        <h:commandLink class="Jbutton" value="search" action="search"/>
                    </div>


                </h:form>
            </section>
            <div id="logoutButton">
                <h:form>
                    <h:commandLink  action="index?faces-redirect=true" value="J-Wall" class="Jbutton"/>
                    <h:commandLink  action="#{loginController.userLogout()}" value="Log-out" class="Jbutton"/>
                </h:form>
            </div>
        </header>
        <section style="text-align: center">      
            <div id="usermenu">
                <h2>Welcome,</h2> <h1 style="font-size: 2em; ">#{loginController.jmbUser.userJnick}</h1>
            </div>
            <div id="timeline">
                <div id="newEntry">
                    <div id="entryMessage" class="errorMessage">
                    </div>
                    <h:form>
                        <h3>Ask or tell the community!</h3>
                        <div id="postArea">
                            <h:inputTextarea style="width: 80%; height:5em; resize: none; border-radius: 0.5em; border-color: #bebebb" id="entry"
                                             value="#{userWallController.userPost}" cols="50" />
                        </div>

                        <span id="fakebutton" class="Jbutton">Share/Ask</span>
                        <div id="postEntry" style="display: none">
                            <h:commandLink value="Share/Ask"  class="Jbutton" actionListener="#{userWallController.postShare()}" />
                        </div>
                    </h:form>        
                </div>
                <h:form>
                    <ui:repeat value="#{searchBeanController.obtenerPosts()}" var="row">
                        <div class="post_item">
                            <h:commandLink action="#" class="user_name">#{row.postUserJnick}:</h:commandLink>
                            <article style="margin-left: 6em"> <p>#{row.postDescription}</p></article>
                            <div class="post_item_toolbar">
                                <div class="post_item_button" >
                                    <h:commandLink value="(#{row.postBeans})+Bean"  actionListener="#{userWallController.moreBean(row.postId)}" />
                                </div>
                                <div class="post_item_button" id="post_coment_area">
                                    <a>Reply</a>
                                </div>
                                <div id="replyPost" style="display: none">
                                    <h:inputTextarea style="width: 80%; height:5em; resize: none; border-radius: 0.5em; border-color: #bebebb" id="entry"
                                                     value="#{userWallController.userPost}" cols="50" />
                                    <br></br>
                                    <h:commandLink class="Jbutton" value="Reply Post" style="30%"/>

                                </div>

                            </div>
                        </div>
                    </ui:repeat>
                </h:form>


            </div>
            <div id="chat">
                <form>
                    <div id="menu">
                        <input id="username" value="#{loginController.jmbUser.userJnick}" disabled="true" style="display: none"/>



                        <div style="text-decoration: none; font-weight: bolder; color: #5797D7;"> Conectar con:
                            <input id="userTarget" style="width: 40%; height:1.5em; 
                                  border-radius: 0.5em; border-color: #bebebb; margin: 1em" /></div>
                    </div>

                    <div id="chatbox">
                        <textarea id="messages" rows="16" cols="48" readonly="readonly" 
                                  style="width: 80%; height:10em; resize: none; 
                                  border-radius: 0.5em; border-color: #bebebb; margin: 1em" ></textarea>
                    </div>


                    <input name="usermsg" type="text" id="message" style="width: 80%; height:3em; resize: none; 
                                  border-radius: 0.5em; border-color: #bebebb; margin: 1em" /> 
                    <a type="button" name="submitmsg" 
                       onclick="sendMessage();" class="Jbutton" > Send message </a>



                </form>

            </div>
        </section>
    </body>
    <script type="text/javascript">
        var ws;
        var userws;
        function initUserSocket(){
            var usr_name = $('#username')[0];
            console.log(usr_name);
            console.log(usr_name.value);
            userws = new WebSocket("ws://172.16.17.73:8081/chatWebSocket/"+usr_name.value);
            userws.onopen = function(event) {
                console.log("open--->"+event);		
            }
            userws.onmessage = function(event) {
                console.log(event);
                var $textarea = $('#messages');
                $textarea.val($textarea.val() +  event.data  + "\n");
                $textarea.animate({
                    scrollTop : $textarea.height()
                }, 1000);
            }
            userws.onclose = function(event) {
                console.log("closed");		
            }
        }
            
        function sendMessage() {
            var $textarea = $('#messages');
            var message = $('#username').val() + ":" + $('#message').val();
            $textarea.val($textarea.val() +  message  + "\n");
            $textarea.animate({
                scrollTop : $textarea.height()
            }, 1000);
            message = message +":" + $('#userTarget').val();
            userws.send(message);
            $('#message').val('');
        }
                
    
    </script>
</html>

